<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Auto-Refresh Test</title>
    <style>
        body {
            font-family: system-ui, -apple-system, sans-serif;
            margin: 20px;
            line-height: 1.6;
        }
        .test-section {
            margin: 20px 0;
            padding: 20px;
            border: 2px solid #ddd;
            border-radius: 8px;
        }
        .test-section h2 {
            margin-top: 0;
        }
        .status {
            padding: 10px;
            margin: 10px 0;
            border-radius: 4px;
        }
        .pass {
            background-color: #d4edda;
            color: #155724;
            border: 1px solid #c3e6cb;
        }
        .fail {
            background-color: #f8d7da;
            color: #721c24;
            border: 1px solid #f5c6cb;
        }
        .info {
            background-color: #d1ecf1;
            color: #0c5460;
            border: 1px solid #bee5eb;
        }
        ul {
            margin: 10px 0;
        }
        li {
            margin: 5px 0;
        }
    </style>
</head>
<body>
    <h1>Auto-Refresh Edit Mode Test Plan</h1>
    
    <div class="test-section">
        <h2>Test Scenario: Auto-refresh behavior during task editing</h2>
        
        <div class="status info">
            <strong>Goal:</strong> Verify that auto-refresh stops when entering edit mode and resumes when exiting edit mode
        </div>
        
        <h3>Test Steps:</h3>
        <ol>
            <li>
                <strong>Setup:</strong>
                <ul>
                    <li>Start the task viewer application</li>
                    <li>Select a profile with tasks</li>
                    <li>Enable auto-refresh with a short interval (5-10 seconds)</li>
                </ul>
            </li>
            
            <li>
                <strong>Test Auto-refresh in Normal Mode:</strong>
                <ul>
                    <li>Wait for auto-refresh to trigger (watch console logs)</li>
                    <li>Verify tasks refresh automatically</li>
                    <li>Expected: Console shows "Auto-refreshing tasks every Xs..." messages</li>
                </ul>
            </li>
            
            <li>
                <strong>Test Auto-refresh Stops in Edit Mode:</strong>
                <ul>
                    <li>Click the edit button (✏️) on any task</li>
                    <li>Enter task edit view</li>
                    <li>Start editing the task details</li>
                    <li>Wait for the auto-refresh interval to pass</li>
                    <li>Expected: No auto-refresh occurs, no console messages about refreshing</li>
                    <li>Expected: Your edits are NOT interrupted</li>
                </ul>
            </li>
            
            <li>
                <strong>Test Auto-refresh Resumes After Edit:</strong>
                <ul>
                    <li>Exit edit mode by clicking "Back" or saving changes</li>
                    <li>Return to the task list view</li>
                    <li>Wait for the auto-refresh interval</li>
                    <li>Expected: Auto-refresh resumes, console shows refresh messages again</li>
                </ul>
            </li>
            
            <li>
                <strong>Test Detail View (non-edit):</strong>
                <ul>
                    <li>Click on a task to view details (not edit)</li>
                    <li>Stay in detail view</li>
                    <li>Expected: Auto-refresh should continue normally</li>
                </ul>
            </li>
        </ol>
        
        <h3>Expected Results:</h3>
        <div class="status pass">
            <ul>
                <li>✓ Auto-refresh works normally when viewing task list</li>
                <li>✓ Auto-refresh STOPS when in edit mode</li>
                <li>✓ No data loss or interruption while editing</li>
                <li>✓ Auto-refresh RESUMES when exiting edit mode</li>
                <li>✓ Console logs confirm refresh behavior</li>
            </ul>
        </div>
        
        <h3>Console Commands for Testing:</h3>
        <pre style="background: #f4f4f4; padding: 10px; border-radius: 4px;">
// To monitor auto-refresh in browser console:
console.log('Monitoring auto-refresh...');

// Check if refresh is happening (watch for network requests):
// Network tab → Filter by "tasks" → Watch for periodic requests

// The console should show:
// - "Auto-refreshing tasks every Xs..." when refresh occurs
// - No such messages when in edit mode
        </pre>
    </div>
    
    <div class="test-section">
        <h2>Implementation Summary</h2>
        <p>The following changes were made to implement this feature:</p>
        <ul>
            <li><strong>App.jsx:</strong>
                <ul>
                    <li>Added <code>isInEditMode</code> state</li>
                    <li>Modified auto-refresh useEffect to check <code>!isInEditMode</code></li>
                    <li>Updated <code>onDetailViewChange</code> callback to accept edit mode parameter</li>
                    <li>Pass <code>profileId</code> prop to TaskTable</li>
                </ul>
            </li>
            <li><strong>TaskTable.jsx:</strong>
                <ul>
                    <li>Accept <code>profileId</code> prop</li>
                    <li>Update <code>onDetailViewChange</code> calls to include edit mode status</li>
                    <li>Pass <code>profileId</code> to TaskEditView component</li>
                </ul>
            </li>
        </ul>
    </div>
</body>
</html>